<nav>
    <ul class="pagination justify-content-center">
        {{#prevPage}}
        <li class="page-item">
            <a id="previous-page" class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        {{/prevPage}}
        {{^prevPage}}
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        {{/prevPage}}

        {{#firstPage}}
        <li class="page-item">
            <a id="first-page" class="page-link" href="#" tabindex="-1">{{displayNumber}}</a>
        </li>
        {{/firstPage}}

        {{#hasPrevPagesGap}}
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="gap">
                <span aria-hidden="true">..</span>
                <span class="sr-only">gap</span>
            </a>
        </li>
        {{/hasPrevPagesGap}}

        {{#prevPages}}
        <li class="page-item">
            <a id="page-{{pageNumber}}" class="page-link" href="#">{{displayNumber}}</a>
        </li>
        {{/prevPages}}

        {{#page}}
        <li class="page-item active">
            <a class="page-link" href="#">{{displayNumber}}</a>
        </li>
        {{/page}}

        {{#nextPages}}
        <li class="page-item">
            <a id="page-{{pageNumber}}" class="page-link" href="#">{{displayNumber}}</a>
        </li>
        {{/nextPages}}

        {{#hasNextPagesGap}}
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="gap">
                <span aria-hidden="true">..</span>
                <span class="sr-only">gap</span>
            </a>
        </li>
        {{/hasNextPagesGap}}

        {{#lastPage}}
        <li class="page-item">
            <a id="last-page" class="page-link" href="#" tabindex="-1">{{displayNumber}}</a>
        </li>
        {{/lastPage}}

        {{#nextPage}}
        <li class="page-item">
            <a id="next-page" class="page-link" href="#" tabindex="-1">Next</a>
        </li>
        {{/nextPage}}
        {{^nextPage}}
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Next</a>
        </li>
        {{/nextPage}}
    </ul>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', function(){

        console.log("prevPage")
        {{#prevPage}}
            listPage('previous-page',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/prevPage}}

            console.log("firstPage")
        {{#firstPage}}
            listPage('first-page',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/firstPage}}

            console.log("prevPages")
        {{#prevPages}}
            console.log("page-{{pageNumber}}")
          listPage('page-{{pageNumber}}',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/prevPages}}

            console.log("nextPages")
        {{#nextPages}}
            console.log("page-{{pageNumber}}")
            listPage('page-{{pageNumber}}',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/nextPages}}

            console.log("lastPage")
        {{#lastPage}}
            listPage('last-page',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/lastPage}}

            console.log("nextPage")
        {{#nextPage}}
            listPage('next-page',{{pageNumber}}{{#pageSize}},{{pageSize}}{{/pageSize}})
        {{/nextPage}}

    }, false);
</script>
